<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        width: 600px;
        height: 500px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
    }
</style>

<body>
    <div id="box"></div>
    <!-- <div style="width: 30px;height: 30px;border-radius:40px;left: 50px;top: 50px;position: absolute;"></div> -->
    <script>
        function Bubble(size, left, top, BgColors) {
            this.size = size || [0, 50];
            this.left = left || [0, 550];//之所以不把范围设成[0,600]是因为圆有半径，如果设成600，右侧的泡泡会被切割。
            this.top = top || [0, 450];//理由如上
            this.BgColors = BgColors || ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"];
            //还可以把BgColors封装到原型对象中，具体操作见老师版本。
        }
        Bubble.prototype.CreateBubble = function () {
            var _size = this.Random(this.size[0], this.size[1]);
            var _left = this.Random(this.left[0], this.left[1]);
            var _top = this.Random(this.top[0], this.top[1]);
            var _BgColor = this.BgColors[this.Random(0, this.BgColors.length - 1)];
            var _html = '<div style="width: ' + _size + 'px;height: ' + _size + 'px;background-color:' + _BgColor + ';border-radius:' + _size + 'px;left: ' + _left + 'px;top: ' + _top + 'px;position: absolute;"></div>'//一个随机泡泡
            return _html;
        }
        Bubble.prototype.Random = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        // var bubble = new Bubble();
        // var bubble_html = Bubble.CreateBubble();
        var bubble_html = '';
        for (i = 0; i <= 100; i++) {
            bubble_html += new Bubble().CreateBubble();
        }
        // document.getElementById('box').innerHTML = ball_html;
        document.getElementById('box').innerHTML = bubble_html;
        // var arr = [10, 50];
        // var _index = Math.floor(Math.random() * (arr[1] - arr[0]) + arr[0]);//因为数组中只有两个元素，所以下标值就是0-1，arr[1]-arr[0]可以求出数组长度，但数组是从10开始的，所以还应该加上数组的初始值
        // console.log(arr[_index]);

        // function Random(min,max) {
        //     return Math.floor(Math.random() * (max - min +1) + min);
        // }

    </script>
</body>

</html>